<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>菜单管理</title>
        <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="/static/css/public.css" media="all">
    </head>
    <body>
        <div class="layuimini-container">
            <div class="layuimini-main">

                <!--表格头部添加栏-->
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal data-add-btn" lay-event="add">添加</button>
                        </button>
                    </div>
                </script>
                <!--数据表格主体-->
                <table id="munu-table" lay-filter="munu-table"></table>
                <!--右侧修改授权删除-->
                <script type="text/html" id="auth-state">
                    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
                </script>
            </div>
        </div>
        <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
        <script>
            layui.extend({
                treeTable: '/static/js/lay-module/treetable-lay/treeTable' //table树形扩展
            }).use(['treeTable', 'form', 'table'], function () {
                var $ = layui.jquery;
                var form = layui.form;
                var treeTable = layui.treeTable;
                // 渲染树形表格
                var insTb = treeTable.render({
                    elem: '#munu-table',
                    toolbar: '#toolbar',
                    url: '/sys/menu/list',
                    tree: {
                        iconIndex: 1,           // 折叠图标显示在第几列
                        isPidData: true,        // 是否是id、pid形式数据
                        idName: 'id',  // id字段名称
                        pidName: 'parentId',     // pid字段名称
                        getIcon: function (obj) {
                            return '';
                        }
                    },
                    cols: [
                        [
                            {type: 'checkbox'},
                            {field: 'title', width: '12%', title: '菜单名称'},
                            {field: 'href', width: '10%', title: '地址url', align: 'center'},
                            {field: 'authority', width: '10%', title: '权限标识', align: 'center'},
                            {
                                field: 'type', width: '6%', align: 'center', templet: function (d) {
                                    if (d.type == 2) {
                                        return '<span class="layui-badge-rim" style="padding: 3px 6px">按钮</span>';
                                    }/*
                                    if (d.parentId == 0) {
                                        return '<span class="layui-badge layui-bg-blue" style="padding: 3px 6px">模块</span>';
                                    }*/ else {
                                        return '<span class="layui-badge layui-bg-orange" style="padding: 3px 6px">菜单</span>';
                                    }
                                }, title: '类型'
                            },
                            {field: 'sort', width: '6%', title: '排序', align: 'center'},
                            {field: 'icon', width: '8%', title: '图标样式', align: 'center'},
                            {field: 'description', width: '15%', title: '描述', align: 'center'},
                            {field: 'createDtae', width: '10%', title: '创建时间', align: 'center'},
                            {toolbar: '#auth-state', minWidth: '29%', align: 'center', title: '操作'}
                        ]
                    ],
                    skin: 'line'
                });

                //执行搜索重载
                var active = {
                    reloads: function () {
                        //执行重载
                        insTb.reload({
                            //page: {
                            //    curr: 1 //重新从第 1 页开始
                            //}
                            //, where: {}
                        }, 'data');
                    }
                };

                /**
                 * toolbar监听事件（新增）
                 */
                treeTable.on('toolbar(munu-table)', function (obj) {
                    if (obj.event === 'add') {  // 监听添加操作
                        var open = layer.open({
                            title: '添加用户',
                            type: 2,
                            shadeClose: true,
                            scrollbar: false,
                            area: ['30%', '60%'],
                            btn: ['确定', '取消'],
                            btnAlign: 'c',
                            content: '/sys/menu/save',
                            yes: function (index, layero) {
                                var body = layer.getChildFrame('body', index);
                                //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                                var iframeWin = window[layero.find('iframe')[0]['name']];
                                iframeWin.layui.form.on("submit(save)", function (data) {
                                    var files = data.field;
                                    $.ajax({
                                        type: "post",
                                        url: "/sys/menu/save",
                                        dataType: "json",
                                        data: files,
                                        success: function (data) {
                                            layer.closeAll();
                                            layer.msg(data.msg);
                                            active.reloads();
                                        },
                                        error: function (data) {
                                            layer.closeAll();
                                            layer.msg(data);
                                        }
                                    });
                                    return false;
                                });
                                body.find("#save").click();
                            }
                        });
                    }
                });

                //状态开关
                /*form.on('switch(status)', function (obj) {
                          $.ajax({
                              type: "put",
                              url: "/sys/menu/edit",
                              dataType: "json",
                              data: {
                                  "id": obj.value,
                                  "status": obj.elem.checked ? "1" : "-1"
                              },
                              success: function (data) {
                                  layer.closeAll();
                                  layer.msg(data.msg);
                              },
                              error: function (data) {
                                  layer.closeAll();
                                  layer.msg("错误！请联系管理员");
                              }
                          });
                      });*/

                //操作监听(修改、删除)
                treeTable.on('tool(munu-table)', function (obj) {
                    var data = obj.data;
                    //修改用户
                    if (obj.event === 'edit') {
                        var open = layer.open({
                            title: '修改菜单',
                            type: 2,
                            shadeClose: true,
                            scrollbar: false,
                            area: ['30%', '60%'],
                            btn: ['确定', '取消'],
                            btnAlign: 'c',
                            content: '/sys/menu/edit?id='+data.id,
                            yes: function (index, layero) {
                                var body = layer.getChildFrame('body', index);
                                //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                                var iframeWin = window[layero.find('iframe')[0]['name']];
                                iframeWin.layui.form.on("submit(save)", function (data1) {
                                    var files = data1.field;
                                    files['id'] = data.id;
                                    $.ajax({
                                        type: "put",
                                        url: "/sys/menu/edit",
                                        dataType: "json",
                                        data: files,
                                        success: function (data) {
                                            layer.closeAll();
                                            layer.msg(data.msg);
                                            active.reloads();
                                        },
                                        error: function (data) {
                                            layer.closeAll();
                                            layer.msg("错误！请联系管理员");
                                        }
                                    });
                                    return false;
                                });
                                body.find("#save").click();
                            }
                        });
                        return false;
                    } else if (obj.event === 'delete') {        //删除单个菜单
                        layer.confirm('确认要删除:' + data.title, function (index) {
                            $.ajax({
                                type: "delete",
                                url: "/sys/menu/delete",
                                dataType: "json",
                                data: {
                                    "id": data.id,
                                    "parentId":data.parentId
                                },
                                success: function (data) {
                                    layer.closeAll();
                                    layer.msg(data.msg);
                                    if (data.success) {
                                        obj.del();
                                    }
                                },
                                error: function (data) {
                                    layer.closeAll();
                                    layer.msg("错误！请联系管理员");
                                }
                            });
                            layer.close(index);
                        });
                    }
                });

                //加载自定义方法
                $('[data-type]').click(function () {
                    var type = $(this).data('type');
                    active[type].call(this);
                })
            });
        </script>
    </body>
</html>